<template>
    <div class="collection">
        <van-nav-bar title="我的收藏" left-text="返回" left-arrow fixed @click-left="back" :right-text="isDel?'完成':'编辑'"
            @click-right="isDeltoggle" />
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="collection-box">
                <li class="collection-box-item" v-for="(item,index) in likeData" :key="index"
                    @[propsClcik]="()=>{
                        item.isChange = !item.isChange; 
                        getChooseData();
                        if(isAll)isAll=item.isChange;}">
                    <van-checkbox v-show="isDel" v-model="item.isChange" @click="getChooseData" class="item-checkbox">
                    </van-checkbox>
                    <img :src="item.smallImg" alt="item.name">
                    <h2>{{item.name}}</h2>
                    <div class="price-box"><span>￥ {{item.price}}</span>
                        <van-icon name="delete" v-show="!isDel" 
                        @click="()=>{removeLike(item.pid);getLikeData()}"/>
                    </div>
                </li>
            </div>
        </van-pull-refresh>
        <van-submit-bar button-text="删除选中" @submit="removeAllLike" v-show="isDel">
            <van-checkbox v-model="isAll" 
            @click="chooseAll">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>
<script>
    import '../assets/scss/Collection.scss'

    export default {
        name: 'Collection',
        data() {
            return {
                isLoading: false,
                // 测试图片
                img: 'http://www.kangliuyong.com:10002/images/product_small/IMG_0381_02p.jpg',
                isAll:false,
                isDel: false,
                likeData: [],
                chooseData: []
            }
        },
        created() {
            this.getLikeData();
        },
        methods: {
            text() {
                console.log('测试')
            },
            back() {
                this.$router.go(-1);
            },
            // 切换是否删除状态 nav右使用
            isDeltoggle() {
                this.isDel = !this.isDel;
                // 完成清除使用选中
                if(!this.idDel){
                    this.likeData.map(i=>{
                        i.isChange =false;
                    })
                    this.chooseData = [];
                }
            },
            // 删除收藏
            removeLike(pid) {
                this.axios({
                        method: 'POST',
                        url:'/notlike',
                        data: {
                            appkey: this.appkey,
                            tokenString: localStorage.getItem('__tk'),
                            pid
                        }
                    }).then(result => {
                        console.log(result);
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            // 获取数据
            getLikeData() {
                this.axios({
                    method: 'GET',
                    url: '/findAllLike',
                    params: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk'),
                    }
                }).then(result => {
                    console.log(result);
                    if (result.data.code === 2000) {
                        let newdata = [];
                        result.data.result.map(i => {
                            newdata.push({
                                ...i,
                                isChange: false
                            });
                        })
                        this.likeData = newdata;
                        this.isLoading = false;

                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // 刷新
            onRefresh() {
                this.getLikeData();
            },
            // 更新选中数据
            getChooseData() {
                let changdata = []
                this.likeData.map(i => {
                    if (i.isChange) {
                        changdata.push(i);
                    }
                })
                this.chooseData = changdata;
                // console.log(this.chooseData)
            },
            // 删除全部
            removeAllLike(){
                this.chooseData.map(i=>{
                    this.removeLike(i.pid);
                })
                setTimeout(()=>{this.getLikeData()},1000)
            },
            // 全选
            chooseAll(){
                this.likeData.map(i=>{
                    i.isChange = this.isAll;
                })
            }
        },
        computed: {
            propsClcik() {
                return this.isDel ? "click" : null;
            }
        },
    }
</script>